<template>
  <div class="cjjzz">
   <section class="cjjzzbanner"></section>
   <div class="cjjzz">
   	<div class="cjjzz1">
   		<h2>精选建筑资质服务</h2>
   		<p class="text">建筑工程设计、招投标、施工等业务必备</p>
   		<div class="content af">
   			<div class="item item1">
   				<h5 class="top">施工总承包资质</h5>
   				<ul class="item_list">
   					<li v-for="(item,index) in list1"><img :src="'https://www.qiyebang.net.cn/img/'+item.img">{{item.tit}}<a target='_blank' href="/ArchitectureDetails/jzgszcb">详情</a></li>
   				</ul>
   			</div>
   			<div class="item item2">
   				<h5 class="top">施工专业承包资质</h5>
          <div style="height: 335px;overflow: hidden;">
            <ul class="item_list" :style="'top:-'+i2+'px'">
            	<li v-for="(item,index) in list2"><img :src="'https://www.qiyebang.net.cn/img/'+item.img">{{item.tit}}<a target='_blank' href="/ArchitectureDetails/jzgszxcb">详情</a></li>
            </ul>
          </div>
   				<a class="batch" @click="batch2()" href="JavaScript:;">换一批</a>
   			</div>
   			<div class="item item3">
   				<h5 class="top">建筑行业设计资质</h5>
          <div style="height: 335px;overflow: hidden;">
   				<ul class="item_list" :style="'top:-'+i3+'px'">
   					<li v-for="(item,index) in list3"><img :src="'https://www.qiyebang.net.cn/img/'+item.img">{{item.tit}}<a target='_blank' href="/ArchitectureDetails/jzgcsjzz">详情</a></li>
   				</ul>
          </div>
   				<a class="batch" @click="batch3()" href="JavaScript:;">换一批</a>
   			</div>
   		</div>
   	</div>
   	<!--  -->

   	<div class="cjjzz2">
   		<h2>精选建筑资质服务</h2>
   		<p class="text">建筑工程设计、招投标、施工等业务必备</p>
   		<div class="content">
   			<ul class="con_list af">
          <!-- 循环体 -->
   				<li>
            <a target="_blank" href="/ArchitectureDetails/jzgssglwzz">
              <i></i>
              <img width="68" height="68" src="~/assets/img/cjjzz2_i1.png" alt="">
              <p class="p1">施工劳务资质</p>
              <p class="p2">2021施工劳务资质办理详情及办理材料</p>
            </a>
   				</li>
   				<li>
            <a target="_blank" href="/ArchitectureDetails/jzgsscxkz">
              <i></i>
              <img width="68" height="68" src="~/assets/img/cjjzz2_i2.png" alt="">
              <p class="p1">安全生产许可证</p>
              <p class="p2">安全生产许可证是建筑企业承接工程的必备许可证</p>
            </a>
   				</li>
   				<li>
            <a target="_blank" href="/ArchitectureDetails/jzgsydjjba">
              <i></i>
              <img width="68" height="68" src="~/assets/img/cjjzz2_i3.png" alt="">
              <p class="p1">异地进京备案</p>
              <p class="p2">办理异地企业进京备案证</p>
            </a>
   				</li>
   				<li>
           <a target="_blank" href="/ArchitectureDetails/jzgsdljz">
              <i></i>
              <img width="68" height="68" src="~/assets/img/cjjzz2_i4.png" alt="">
              <p class="p1">建筑公司代理记账</p>
              <p class="p2">专为中小型建筑企业代理记账</p>
            </a>
   				</li>
   				<li>
            <a href="/ArchitectureDetails/jzgsgsfw">
   					<i></i>
   					<img width="68" height="68" src="~/assets/img/cjjzz2_i5.png" alt="">
   					<p class="p1">建筑公司注册</p>
   					<p class="p2">办理北京建筑公司注册、公司变更、公司转让等业务</p>
            </a>
   				</li>
   				<li>
            <a href="/ArchitectureDetails/jzgszx">
              <i></i>
              <img width="68" height="68" src="~/assets/img/cjjzz2_i6.png" alt="">
              <p class="p1">建筑公司注销</p>
              <p class="p2">建筑公司注销、疑难注销、吊销转注销</p>
            </a>
   				</li>
          <li>
            <a href="/ArchitectureDetails/jzgszr">
              <i></i>
              <img width="68" height="68" src="~/assets/img/cjjzz2_i7.png" alt="">
              <p class="p1">资质转让</p>
              <p class="p2">专业团队、代办资质转让</p>
            </a>
          </li>
          <li>
            <a href="/ArchitectureDetails/jzgszzsj">
              <i></i>
              <img width="68" height="68" src="~/assets/img/cjjzz2_i8.png" alt="">
              <p class="p1">资质升级</p>
              <p class="p2">资质升级，无论是三升二，还是二升一</p>
            </a>
          </li>
          <li>
            <a target="_blank" href="/ArchitectureDetails/jzgszzyq">
              <i></i>
              <img width="68" height="68" src="~/assets/img/cjjzz2_i9.png" alt="">
              <p class="p1">资质延期</p>
              <p class="p2">快速办理资质延期，掌握主动权</p>
            </a>
          </li>
          <!-- 循环体 -->
   			</ul>
   		</div>
   	</div>

    <!--  -->
   </div>
   <section class="rssc4">
        <h3>咨询管家</h3>
        <p class="xq">专业管家在线服务，一对一免费咨询</p>
        <ul class="af">
          <li  v-for="(gj,gji) in title.gj" :class="['li'+(gji+1),(gji+1)%5==0?'last':'']" :key="gji">
            <div class="nm" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+gj.specialavatarone+') no-repeat'}">
              <h4>{{gj.username}}</h4>
              <p>{{gjname[gji]}}</p>
            </div>
            <div class="hover af">
              <img :src="'https://exam.zhonghaiqihang.com'+gj.specialavatartwo" width="157" height="158">
              <div>
                <p class="p1">{{gj.username}}  <span>{{title.zym.label}}</span></p>
                <p class="p2">电话： <span>{{gj.mobile}}</span></p>
                <p class="p3">擅长: {{gj.major}}</p>
                <a :href="gj.cclink" class="zx" target="_blank">在线咨询</a>
              </div>
            </div>
          </li>

        </ul>
      </section>
      <my-heart></my-heart>
    <my-ft></my-ft>
  </div>


</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';

  export default {
    name: 'HelloWorld',
    data () {
      return {
        gjname:['经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问'],
        i3:0,
        num3:0,
        i2:0,
        num2:0,
        list1:[
          {tit:'建筑工程总承包',img:'jz_zcbi1.png'},
          {tit:'市政总承包资质',img:'jz_zcbi2.png'},
          {tit:'机电工程总承包资质',img:'jz_zcbi3.png'},
          {tit:'电力施工总承包资质',img:'jz_zcbi4.png'},
          {tit:'通信施工总承包资质',img:'jz_zcbi5.png'}
          ],
          list2:[
            {tit:'装饰装修资质',img:'jz_zycbi1.png'},
            {tit:'钢结构工程资质',img:'jz_zycbi2.png'},
            {tit:'消防设施工程资质',img:'jz_zycbi3.png'},
            {tit:'建筑机电安装资质',img:'jz_zycbi4.png'},
            {tit:'防水防腐保温资质',img:'jz_zycbi5.png'},
            {tit:'环保工程资质',img:'jz_zycbi6.png'},
            {tit:'输变电资质',img:'jz_zycbi7.png'},
            {tit:'电子与智能化资质',img:'jz_zycbi8.png'},
            {tit:'建筑幕墙资质',img:'jz_zycbi9.png'},
            {tit:'地基基础资质',img:'jz_zycbi10.png'},
            {tit:'起重设备安装资质',img:'jz_zycbi11.png'},
            {tit:'古建筑资质',img:'jz_zycbi12.png'},
          ],
          list3:[
            {tit:'建筑智能化设计资质',img:'jz_jzhyi1.png'},
            {tit:'环境工程设计资质',img:'jz_jzhyi2.png'},
            {tit:'钢结构设计资质',img:'jz_jzhyi3.png'},
            {tit:'工程勘察专业资质',img:'jz_jzhyi4.png'},
            {tit:'工程设计专项资质',img:'jz_jzhyi5.png'},
            {tit:'建筑幕墙设计资质',img:'jz_jzhyi6.png'},
            {tit:'工程设计综合资质',img:'jz_jzhyi7.png'},
            {tit:'工程勘察综合资质',img:'jz_jzhyi8.png'},
            {tit:'建筑装饰设计资质',img:'jz_jzhyi9.png'},
            {tit:'照明工程设计资质',img:'jz_jzhyi10.png'},
            {tit:'工程勘察劳务资质',img:'jz_jzhyi11.png'},
            {tit:'风景园林工程设计资质',img:'jz_jzhyi12.png'},
            {tit:'消防设施工程设计资质',img:'jz_jzhyi13.png'},
          ]
      }
    },
    mounted:function(){

      let a = document.cookie;
      let cookie = '';
      if(a.indexOf('userinfoRes')!=-1){
        let b = a.split('userinfoRes=');
        let c = b[1].split(';');
        cookie = c[0];
      }
      this.dlzt = cookie;
      $(document).ready(function(){
        $('.tbnava5').addClass('select');

      })
    },
    head() {
    	return {
    		title: '北京建筑资质__企业邦',
    		meta: [{
    				hid: 'description',
    				name: 'description',
    				content: '北京建筑资质_企业邦'
    			},
    			{
    				hid: 'keywords',
    				name: 'keywords',
    				content: '北京建筑资质_企业邦'
    			}
    		]
    	}
    },
    async asyncData ({ params }) {
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'91'
      }});
    let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {nav:nh.data,zym:nh3.data,gj:nh4.data};
    return { title: data}
  },


  methods:{
    batch2:function(){
      var that = this
      if(that.num2!=parseInt(that.list2.length/5)){
         that.num2++
      }else{
        that.num2=0
      }
      that.i2 = that.num2 * 335
    },
    batch3:function(){
      var that = this
      if(that.num3!=parseInt(that.list3.length/5)){
        that.num3++
      }else{
        that.num3=0
      }
      that.i3 = that.num3 * 335
    }
  }

  }



</script>

<style>
</style>
